<!-- 预览pdf -->
<template>
  <a-modal v-bind="$attrs" :footer="false" width="60vw" unmount-on-close :mask-closable="false">
    <div class="bottom_btns_wrap" v-if="!errorStatus">
      <span></span>
      <div>
        <!-- 缩小 -->
        <icon-zoom-out size="18" @click="clickCanvaReduce" />
        <!-- 缩放信息 -->
        <span class="select-none ml-2 mr-2 border pl-2 pr-2">{{ widthZoom }}</span>
        <!-- 放大 -->
        <icon-zoom-in size="18" @click="clickCanvaAmplify" />
      </div>
      <icon-download size="18" @click="downloadFn($attrs.title)" />
    </div>
    <div class="overflow-auto pdfView">
      <!-- <VuePdfEmbed
        v-if="!errorStatus"
        ref="pdfRef"
        @loaded="errorStatus = false"
        @loading-failed="errorStatus = true"
        @rendered="errorStatus = false"
        @rendering-failed="errorStatus = true"
        class="h-full"
        :source="url"
        :style="scaleFun"
      /> -->
      <div class="empty">
        <a-empty>
          <template #image>
            <icon-exclamation-circle-fill />
          </template>
          文件加载失败
        </a-empty>
      </div>
    </div>
  </a-modal>
</template>
<script setup>
  import { computed, ref, reactive } from 'vue'
  // import VuePdfEmbed from 'vue-pdf-embed'

  defineProps({
    url: {
      type: String,
      required: true,
      default: '',
    },
  })
  // 是否加载失败
  const errorStatus = ref(false)

  const pdfRef = ref()
  // 下载方法
  const downloadFn = (title) => {
    pdfRef.value.download(title)
  }

  // 初始化状态
  const initState = {
    scale: 1,
  }
  const state = reactive({ ...initState })

  const widthZoom = computed(() => `${(state.scale * 100).toFixed(0)}%`)
  const scaleFun = computed(() => {
    let scale = state.scale
    return `transform:scale(${scale})`
  })

  const clickCanvaAmplify = () => {
    // 放大按钮
    state.scale >= 1.5 ? '' : (state.scale = Number((state.scale + 0.1).toFixed(1)))
  }
  const clickCanvaReduce = () => {
    // 缩小按钮
    state.scale <= 0.5 ? '' : (state.scale = Number((state.scale - 0.1).toFixed(1)))
  }
</script>
<style scoped>
  .bottom_btns_wrap {
    padding: 5px 21px;
    display: flex;
    border-radius: 2px;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.06);
    font-size: 16px;
    cursor: pointer;
  }
  .pdfView {
    height: 78vh;
  }
  .empty {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
